

<style>
    .layui-input{width: 266px; height: 30px; padding:0 10px;}
    .input-group-addon{background-color:#fff; width: 33px; height: 30px;border-radius: 0; }
</style>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">交易数据</h3>
        <div class="box-tools pull-right">

            <div class="btn-group pull-right" style="margin-right: 10px">

                <input type="text" style="width: 266px;" class="layui-input pull-right" id="time" placeholder="自定义时间" lay-key="17">

                <div class="input-group-addon pull-right" style="border: 1px solid #ccc;border-right: 0;">
                    <i class="fa fa-calendar"></i>
                </div>

            </div>

            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default days"  data-type="3" title="最近30天">
                    <span class="hidden-xs">最近30天</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default days"  data-type="2" title="最近7天">
                    <span class="hidden-xs">最近7天</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm days btn-success" data-type="1" title="昨天">
                    <span class="hidden-xs">昨天</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default" title="导出数据">
                    <span class="hidden-xs">导出数据</span>
                </a>
            </div>
        </div>
    </div>
    <div class="box-body" style="display: block;">
        <div class="col-md-8">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>体验人数</th>
                        <th>订阅人数</th>
                        <th>下单数</th>
                        <th>vip充值人数</th>
                        <th>购买校币金额</th>
                        <th>下单总金额</th>
                        <th>付款转化率</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>
                            <span class="experience_count">{{$transaction_data['experience_count']}}</span>
                        </td>
                        <td>
                            <span class="subscribe_count">{{$transaction_data['subscribe_count']}}</span>
                        </td>
                        <td>
                            <span class="order_count">{{$transaction_data['order_count']}}</span>
                        </td>
                        <td>
                            <span class="vip_count">{{$transaction_data['vip_count']}}</span>
                        </td>
                        <td>
                            <span class="xb_amount">{{$transaction_data['xb_amount']}}</span>
                        </td>
                        <td>
                            <span class="order_amount">{{$transaction_data['order_amount']}}</span>
                        </td>
                        <td>
                            <span class="conversion_rate">{{$transaction_data['conversion_rate']}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="col-md-4">

        </div>

    </div>
</div>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">销售额占比</h3>
        <div class="box-tools pull-right">

            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default sales" data-sales_type="2" title="IOS">
                    <span class="hidden-xs">IOS</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default sales" data-sales_type="1" title="安卓">
                    <span class="hidden-xs">安卓</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-success sales" data-sales_type="0" title="全部">
                    <span class="hidden-xs">全部</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default" title="导出数据">
                    <span class="hidden-xs">导出数据</span>
                </a>
            </div>
        </div>
    </div>
    <div class="box-body" style="display: block;">
        <div id="main" style="width: 80%;height:400px; margin-left: 10%; text-align: center;"></div>
    </div>
</div>







<script>

    $(function () {

        var start_time = '';
        var end_time = '';

        laydate.render({
            elem: '#time',
            type: 'datetime',
            range: true,
            btns: ['clear', 'confirm'],
            done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。

                start_time = dates(date);
                end_time = dates(endDate);

                days_type = 0;
                initData();
            }
        });

        function dates(time){
            var year = time.year;
            var month = time.month;
            var date = time.date;
            var hours = time.hours;
            var minutes = time.minutes;
            var seconds = time.seconds;
            if(month < 10){
                month = "0" + month;
            }
            if(date < 10){
                date = "0" + date;
            }
            if(hours < 10){
                hours = "0" + hours;
            }
            if(minutes < 10){
                minutes = "0" + minutes;
            }
            if(seconds < 10){
                seconds = "0" + seconds;
            }

            return year+"-"+month+"-"+date+" "+hours+":"+minutes+":"+seconds;
        }


        var days_type = 1;

        $('.days').click(function () {
            $('.days.btn-success').addClass('btn-default');
            $('.days.btn-success').removeClass('btn-success');
            if ($(this).hasClass('btn-default')){
                $(this).removeClass('btn-default');
            }
            $(this).addClass('btn-success');

            days_type = $(this).data('type');
            initData();
        });

        function initData(){
            $.get('/api/getTransactionData',{'days_type':days_type,'start_time':start_time,'end_time':end_time}).done(function (res) {

                $('.experience_count').html(res.data.experience_count);
                $('.subscribe_count').html(res.data.subscribe_count);
                $('.order_count').html(res.data.order_count);
                $('.vip_count').html(res.data.vip_count);
                $('.xb_amount').html(res.data.xb_amount);
                $('.order_amount').html(res.data.order_amount);
                $('.conversion_rate').html(res.data.conversion_rate);
            });

            initCharts();
        }

        var sales_type = 0;

        $('.sales').click(function () {
            $('.sales.btn-success').addClass('btn-default');
            $('.sales.btn-success').removeClass('btn-success');
            if ($(this).hasClass('btn-default')){
                $(this).removeClass('btn-default');
            }
            $(this).addClass('btn-success');

            sales_type = $(this).data('sales_type');
            initCharts(sales_type);
        });

        var myChart = echarts.init(document.getElementById('main'));
        initCharts(0);

        function initCharts() {
            myChart.showLoading();
            $.get('/api/getSalesVolume',{'days_type':days_type,'sales_type':sales_type,'start_time':start_time,'end_time':end_time}).done(function (data) {
                myChart.hideLoading();
                option = {
                    title: {
                        //text: '销售额占比'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        data: data.data,
                        right:10,
                        formatter: function (params) {
                            for (var i = 0; i < data.data.length; i++) {
                                if (data.data[i].name == params) {
                                    return params +" ￥"+ data.data[i].value;
                                }
                            }
                        },
                    },
                    series: [
                        {
                            name:'销售额占比',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    formatter: "{b}\n\n￥{c}",
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '24'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                /*normal:{
                                    color:function(params) {
                                        var colorList = [
                                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }*/
                            },
                            data:data.data
                        }
                    ]
                };
                myChart.setOption(option);
            });
        }


    });


</script>